<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <ul>
            <li>图片1</li>
            <li>图片2</li>
            <li>图片3</li>
            <li>图片4</li>
        </ul>
        <div class="image">
            <img src="../索尼/img/img/10050.png" alt="">
            <img src="../索尼/img/img/10051.jpg" alt="">
            <img src="../索尼/img/img/10052.png" alt="">
            <img src="../索尼/img/img/10053.png" alt="">
        </div>
    </div>
    <script>
        var li = document.querySelectorAll("li")
        for(var i = 0;i <li.length;i++){
            li[i].index = i;
            li[i].onmouseover = function(){
                this.style.backgroundColor = "yellow";
                for(var j = 0 ;j< img.length;j++){
                    img[j].style.display = "none"
                }
                img[this.index].display = "none"
            }
            li[i].onpointerleave = function(){
                this.style.backgroundColor = "lightslategray"
            }
        }
        // var li = document.getElementsByTagName("li");
        // var img = document.getElementsByTagName("img");
        // for(var i = 0 ;i<li.length;i++){
        //     li[i].onmouseover = function(){
        //         this.style.backgroundColor = "yellow"
        //         for(var j=0 ;j<li.length;j++){
        //             img[j].style.display = "block";
        //         }
        //         li[this.index].style.display = "block";
        //     }
        //     li[i].onmouseleave = function(){
        //         this.style.backgroundColor = "rgb(231,231,231)";
        //     }
        // }
    </script>
</body>
</html>